<!--角色编辑页面-->
<template>
    <el-container>
        <el-header height="25px">
            <div class="skew-div">角色管理数据</div>
        </el-header>
        <el-divider></el-divider>
        <el-main>
            <!--            查询条件栏-->
            <el-col :span="5">
                <div class="grid-content ">
                    角色名称：
                    <el-input v-model="input" placeholder="角色名称" size="mini" style="width: 60%;">
                    </el-input>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content ">
                    角色描述：
                    <el-input v-model="input" placeholder="角色描述" size="mini" style="width: 60%;">
                    </el-input>
                </div>
            </el-col>
            <el-button type="primary" size="small">查询</el-button>
            <el-button size="small" @click="resetsuccess">重置</el-button>
            <el-button type="primary" style="float: right" size="large" @click="dialogFormVisible = true">新建</el-button>
            <!--新建角色信息对话框-->
            <el-dialog title="请填写角色信息" :visible.sync="dialogFormVisible">
                <el-form :model="roleData">
                    <el-form-item label="*角色名称" :label-width="formLabelWidth">
                        <el-input v-model="roleData.roleName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单访问权限" :label-width="formLabelWidth">
                        <el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange">
                        </el-tree>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">提 交</el-button>
                </div>
            </el-dialog>
            <!--            角色信息详情-->
            <el-table :data="roleData" stripe style="width: 100%">
                <el-table-column prop="roleName" label="角色名称" width="180">
                </el-table-column>
                <el-table-column prop="description" label="角色描述">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column prop="recentLoginTime" label="最近登录时间">
                </el-table-column>
                <!--右侧操作栏-->
                <el-table-column label="操作">
                    <template>
                        <el-button type="primary" size="mini" @click="editsuccess">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deletesuccess">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data: function () {
        return {
            props: {
                label: 'name',
                children: 'zones'
            },
            count: 1,//树形控件
            roleData: [{
                roleName: '数据空间管理',
                description: '查询数据空间',
                createTime: '2023-08-16 22:26:32',
                recentLoginTime: '2023-08-16 22:26:32'
            }, {
                roleName: '安全控制',
                description: '安全控制角色',
                createTime: '2023-08-16 22:26:32',
                recentLoginTime: '2023-08-16 22:26:32'
            }],
            dialogFormVisible: false,//编辑对话框
            formLabelWidth: '120px',//对话框宽度
            value: true //用户状态
        }
    },
    methods: {
        deletesuccess() {
            this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
            });
        },
        resetsuccess() {
            this.$message({
                showClose: true,
                message: '信息已重置',
                type: 'success'
            });
        },
        editsuccess() {
            this.$message({
                showClose: true,
                message: '编辑成功',
                type: 'success'
            });
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        handleNodeClick(data) {
            console.log(data);
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve([{ name: '数据采集' }, { name: '子系统控制' }, { name: '结果展示' }, { name: '用户管理' }]);
            }
            if (node.level > 3) return resolve([]);

            var hasChild;
            if (node.data.name === '数据采集') {
                hasChild = true;
            } else if (node.data.name === '子系统控制') {
                hasChild = true;
            } else if (node.data.name === '系统配置') {
                hasChild = true;
            } else if (node.data.name === '结果展示') {
                hasChild = false;
            } else if (node.data.name === '用户管理') {
                hasChild = true;
            } else {
                hasChild = Math.random() > 0.5;
            }

            setTimeout(() => {
                var data;
                if (node.data.name === '数据采集' && hasChild) {
                    data = [{ name: '域名关键词爬取' }, { name: '供应商网站爬取' }, { name: '论文数据库爬取' }, { name: '自定义网站爬取' }];
                } else if (node.data.name === '子系统控制' && hasChild) {
                    data = [{ name: '系统配置' }, { name: '监控日志' }]
                } else if (node.data.name === '系统配置' && hasChild) {
                    data = [{ name: '爬虫任务参数设置' }, { name: '系统物理参数设置' }]
                } else if (node.data.name === '用户管理' && hasChild) {
                    data = [{ name: '角色编辑' }, { name: '用户编辑' }]
                } else {
                    data = [];
                }

                resolve(data);
            }, 500);
        }
    },

}
</script>

<style>
.skew-div {
    transform: skew(-10deg);
    text-align: left;
    font-size: 25px;
}
</style>
